<!--
 * Copyright (c) 2009 The Chromium Authors. All rights reserved.  Use of this
 * source code is governed by a BSD-style license that can be found in the
 * LICENSE file.
-->
<html>
 <head>
  <title> Screen Capture Options </title>
  <style>
  body {
    font-family: arial, sans-serif;
    margin:10px;
    background: #EBEFF9;
    font-size: 13px;
  }
  #header {
    padding-bottom:1em;
    padding-top:1em;
  }
  #header h1 {
    font-size: 30px;
    display: inline;
    color: #3d5d6a;
    padding-bottom: 40px;
    padding-left: 90px;
    padding-top: 70px;
    background: url(images/icon_48.png) no-repeat;
    background-position: 1px 62px;
  }
  h4 {
    padding-left: 0.5em;
    border-bottom: 2px dotted #c3c3c3;
    color: #333333;
    line-height: 28px;
    font-size: 15px;
  }
  p {
    padding-left: 2em;
    font-family: verdana, arial, sans-serif, simsun;
    font-size: 14px;
  }
  input {
    cursor: pointer;
  }
  .section-header {
    background: #ebeff9;
    border-top: 1px solid #b5c7de;
    font-size: 99%;
    padding: 3px 0 2px 5px;
    font-weight: bold;
    margin-bottom: 1em;
    margin-top: 1em;
  }
  .contentBox {
    background-color: #ffffff;
    border: 3px solid #bec9ce;
    border-bottom-left-radius: 20px 20px;
    border-bottom-right-radius: 20px 20px;
    border-top-left-radius: 20px 20px;
    border-top-right-radius: 20px 20px;
    padding: 30px;
    text-align: left;
    margin: 50px auto 20px auto;
    height: auto;
    width: 600px;
  }
  .section-content {
    padding-left: 80px;
    line-height: 25px;
  }
  .colorBox {
    width: 60px;
    height: 20px;
    margin: 3px 0 0 2px;
  }
  #colorpad {
    position: absolute;
    word-wrap: break-word;
    word-break: normal;
    z-index: 10;
    border: #000000 solid 1px;
    background-color: #ffffff;
    padding: 5px;
    width: 393px;
  }
  #colorpad a {
    margin: 2px;
    padding: 1px;
    display: block;
    height: 20px;
    width: 20px;
    float: left;
    border: 1px solid #333333;
  }
  .contentLeft {
    float: left;
    width: 100px;
    line-height: 28px;
  }
  .contentRight {
    float: left;
  }
  .clear {
    clear: both;
  }
  .section-content {
    padding-left: 55px;
  }
  .closeBtn {
    margin: 20px 0 0 0;
  }
  #footer {
    text-align: center;
    font-size: 13px;
  }
  #filePath {
    background:#ebebe4;
    border: 1px solid #7f9db9;
    color:#aca799;
    line-height: 18px;
  }
  </style>
  <script>
  var bg = chrome.extension.getBackgroundPage();
  
  function $(id) {
    return document.getElementById(id);
  }
  
  function isHighVersion() {
    var version = navigator.userAgent.match(/Chrome\/(\d+)/)[1];
    return version > 9;
  }
  
  function init() {
    i18nReplace('optionTitle', 'options');
    i18nReplace('saveAndClose', 'save_and_close');
    i18nReplace('screenshootQualitySetting', 'quality_setting');
    i18nReplace('lossyScreenShot', 'lossy');
    i18nReplace('losslessScreenShot', 'lossless');
    i18nReplace('autosaveSetting', 'save_setting');
    i18nReplace('shorcutSetting', 'shortcut_setting');
    i18nReplace('settingShortcutText', 'shortcutsetting_text');
    i18nReplace('defaultPath', 'save_tip');
    i18nReplace('autosaveText', 'autosave');
    i18nReplace('setSavePath', 'set_save_path');
    i18nReplace('openSavePath', 'open_save_path');
    if (isHighVersion()) {
      $('lossyScreenShot').innerText += ' (JPEG)';
      $('losslessScreenShot').innerText += ' (PNG)';
    }
    $('autosave').checked = eval(localStorage.autoSave);
    $('settingShortcut').checked = eval(localStorage.settingShortcut);
    $('filePath').value = localStorage.savePath =
        localStorage.savePath ? localStorage.savePath : bg.plugin.getDefaultSavePath();
    $('setSavePath').addEventListener('click', function() {
      // Here we use the plugin object in options.html instead of the plugin object
      // in background page, so that the SetSavePath dialog will be a modal dialog.
      var pluginobj = $('pluginobj');
      pluginobj.SetSavePath(localStorage.savePath, function(savePath) {
        $('filePath').value = localStorage.savePath = savePath;
      }, chrome.i18n.getMessage('set_save_path_title'));
    });
    $('openSavePath').addEventListener('click', function() {
      bg.plugin.openSavePath(localStorage.savePath);
    })
    initScreenCaptureQuality();
  }

  function save() {
     localStorage.screenshootQuality =
         $('lossy').checked ? 'jpeg' : '' ||
         $('lossless').checked ? 'png' : '';
     localStorage.autoSave = $('autosave').checked ?
         'true' : 'false';
     localStorage.settingShortcut = $('settingShortcut').checked ? 
        'true' : 'false';
  }

  function saveAndClose() {
    save();
    chrome.tabs.getSelected(null, function(tab) {
      chrome.tabs.remove(tab.id);
    });
  }

  function initScreenCaptureQuality() {
    $('lossy').checked =
        (localStorage.screenshootQuality == 'jpeg' ? true : false);
    $('lossless').checked =
        (localStorage.screenshootQuality == 'png' ? true : false);
  }

  function i18nReplace(id, name) {
    return $(id).innerText = chrome.i18n.getMessage(name);
  }

  </script>
 </head>
 <body onload="init();">

 <div class="contentBox">
   <div id="header">
     <h1 id="optionTitle"></h1>
   </div>
   <h4 id="screenshootQualitySetting"></h4>
   <div class="section-content">
     <div>
       <label></label><input id="lossy" type="radio" name="quality"><span id="lossyScreenShot"></span></label>
       &nbsp; <label></label><input id="lossless" type="radio" name="quality"><span id="losslessScreenShot">
       </span></label> </div>
     <div class="clear"></div>
   </div>
   <div id="autosaveSettingDiv">
   <h4 id="autosaveSetting"></h4>
   <div class="section-content">
     <div class="clear"></div>
     <div id="defaultPath" style="margin-left:4px;"></div>
     <div style="margin-left:2px;" ><input type="text" readonly id="filePath" size="40">
       <button id="setSavePath"></button>
       <button id="openSavePath"></button>
     </div>
     <div style="margin:5px 0 0 1px;">
       <label><div style="float:left; margin-top:2px;">
         <input type="checkbox" id="autosave">
       </div>
       <div style="margin-left:5px; width:480px; float:left;" id="autosaveText"></div></label>
       </div><div class="clear"></div>
   </div> </div>
   <div id="shortcutSettingDiv" style="margin: 0px 0px 5px 0px">
      <h4 id="shorcutSetting"></h4>  
      <div style="margin: 2px 0px 0px 56px">
         <input type="checkbox" id="settingShortcut">
         <span id="settingShortcutText"></span>
      </div></div>
   <div class="closeBtn"><button id="saveAndClose" onclick="saveAndClose()"></button>
   </div></div>
 </div>
 <div id="footer">&copy;2010 Google</div>
 <embed id="pluginobj" width="0" height="0" type="application/x-screencapture">
 </body>
</html>
